<template>
	<el-table-column v-bind="$attrs" type="expand" :label="label" :width="width" :min-width="minWidth">
		<template #default="{ row }">
			<div class="table-expand">
				<span v-for="(item, index) in contents" :key="index">
					{{ item.label }}: {{ getData(row)[item.prop] }}
				</span>
			</div>
		</template>
	</el-table-column>
</template>

<script lang='ts' setup>
// 表格中使用的展开信息组件
defineOptions({
	name: 'MkColumnExpand'
});

// 定义组件的 props
const props = defineProps({
	label: { type: String, default: '' },
	width: { type: String, default: undefined },
	minWidth: { type: String, default: '50' },
	// 新增 prop，用于指定从 row 中获取 bloodInfo 的路径
	propPath: { type: String, default: undefined },
	contents: { type: Array<{ label: string; prop: string; }>, default: () => [] }
});

// 计算属性，根据 propPath 获取相应的数据
const getData = (row: any) => {
	let data: { [key: string]: any } = row
	// console.log('data', row, props.propPath)
	if (!props.propPath) {
		return data
	}
	const path = props.propPath.split('.')
	for (const key of path) {
		if (data && data.hasOwnProperty(key)) {
			data = data[key]
		} else
			return {}

	}
	return data
}

</script>

<style lang='scss' scoped>
.table-expand {
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
	flex-direction: row;
}
</style>